<template>
  <div class="ApplySort">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>门户管理</el-breadcrumb-item>
      <el-breadcrumb-item><a>应用排序</a></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="search-content">
      <el-input
        placeholder="请输入应用名称"
        prefix-icon="el-icon-search"
        v-model="searchApp"
        @keydown.native.enter="search"
      ></el-input>
    </div>
    <div class="table-content">
      <div class="titles">
        <div
          v-for="(item, index) in titleList"
          :class="['title', activeInd === index ? 'active' : '']"
          :key="item"
          @click="activeInd = index"
        >
          {{ item }}
        </div>
      </div>
      <div class="list-content scroll-content">
        <div v-for="item in showList" :key="item.category_id">
          <div class="showSub">
            <div class="titleClick" @click="item.showSub = !item.showSub">
              <i
                :class="['el-icon-arrow-down', item.showSub ? 'reverse' : '']"
              ></i>
              <span>{{ item.category_name_zh }}</span>
            </div>

            <el-table :data="item.app_list" v-show="item.showSub">
              <el-table-column type="index"></el-table-column>
              <el-table-column
                label="应用名称"
                prop="app_name"
              ></el-table-column>
              <el-table-column label="描述" prop="describe"></el-table-column>
              <el-table-column label="顺序" prop="order">
                <template slot-scope="scope">
                  <div class="order">
                    <div class="normal" v-show="activeRow !== scope.row.app_id">
                      <span>{{ scope.row.order }}</span>
                      <el-button
                        type="text"
                        size="mini"
                        icon="el-icon-edit"
                        @click="toInput(scope.row)"
                      ></el-button>
                    </div>
                    <el-input
                      v-if="activeRow === scope.row.app_id"
                      v-model="tempOrderNum"
                      size="mini"
                      @blur="inputBlur"
                      id="elInput"
                      maxlength="4"
                    ></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="更新时间"
                prop="update_time"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  changeAppOrder,
  getAllAppInCategory,
  getTargetCategoryApp,
} from "@/http/api";
import dayjs from "dayjs";
export default {
  name: "ApplySort",
  data() {
    return {
      groupList: [],
      titleList: [],
      showList: [],
      activeInd: 0,
      searchApp: "",
      tempOrderNum: "",
      activeRow: "",
    };
  },
  mounted() {
    this.getShowList();
  },
  methods: {
    async getShowList() {
      this.useResData(await getAllAppInCategory());
    },
    async search() {
      this.useResData(await getTargetCategoryApp(this.searchApp));
    },
    useResData(res) {
      if (res.code === 20041) {
        this.groupList = res.data;
        this.showList = res.data.map((item) => {
          return { ...item, showSub: false };
        });
        this.showList.forEach((item) => {
          item.app_list.forEach((item) => {
            item.update_time = dayjs(item.update_time).format(
              "YYYY-MM-DD HH:mm:ss"
            );
          });
        });
        this.titleList = res.data.map((item) => item.category_name_zh);
        this.titleList.unshift("全部");
      }
    },
    toInput(row) {
      this.activeRow = row.app_id;
      this.tempOrderNum = row.order;
      this.$nextTick(() => {
        document.querySelector("#elInput").focus();
      });
    },
    async inputBlur() {
      if (
        isNaN(Number(this.tempOrderNum)) ||
        Number(this.tempOrderNum) < 0 ||
        Math.floor(Number(this.tempOrderNum)) !== Number(this.tempOrderNum)
      ) {
        this.$message.error("只能输入大于0的整数");
      } else {
        let res = await changeAppOrder({
          app_id: this.activeRow,
          order: this.tempOrderNum
        });
        this.activeRow = undefined;
        if(res.code === 20031) {
          this.$message.success("编辑成功")
          this.search()
        } else {
          this.$message.error(res.msg)
        }
      }
    },
  },
  watch: {
    activeInd: function (cur) {
      if (!cur) {
        this.showList = this.groupList.map((item) => {
          return { ...item, showSub: false };
        });
      } else {
        this.showList = [{ ...this.groupList[cur - 1], showSub: false }];
      }
    },
  },
};
</script>
<style lang="less" scoped>
.ApplySort {
  .search-content {
    margin-bottom: 20px;
  }
  .table-content {
    height: calc(100vh - 240px);
    padding: 0 !important;
    position: relative;
    .titles {
      display: flex;
      margin-bottom: 10px;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px;
      padding: 18px;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 1;
      background: #fff;
      .title {
        padding: 0 16px;
        line-height: 30px;
        height: 30px;
        border-radius: 15px;
        font-size: 14px;
        cursor: pointer;
        &.active {
          color: #3c8cff;
          background-color: #ebf1ff;
        }
      }
    }
    .list-content {
      padding: 80px 20px 20px;
      height: calc(100vh - 240px);
      .showSub {
        margin-bottom: 20px;
        .el-icon-arrow-down {
          transition: all 0.5s;
          margin-right: 4px;
          &.reverse {
            transform: rotate(-180deg);
          }
        }
        .order {
          button {
            padding: 0;
            display: none;
          }
          &:hover button {
            display: inline-block;
          }
        }
      }
    }
  }
}
</style>
